<template>
  <div class="box">
      <!-- 推荐关注 -->
      <p>推荐关注：<span class="el-icon-refresh togger"></span></p>
      <!-- 用户卡片 -->
      <div class="userCord">
        <div class="cord" v-for="item in userinfo" :key="item.index">
            <div class="userInfo">
                <!-- 头像 -->
                <div class="userHeader">
                    
                    <img style="border-radius:50%" width="100%" height="100%" :src="item.userHeader" alt="">
                    <img src="@/assets/V.png" alt="">
                </div>
                <!-- 信息 -->
                <div class="userMessage">
                    <p>{{item.username}}<span style="font-size:10px;margin-left:10px">粉丝：{{item.fans}}</span></p>
                    <p style="color:#d9d8d4;font-size:10px;margin-top:5px">{{item.message}}</p>
                </div>
            </div>
            <div class="methodBox">
                <!-- 关注 -->
                <a href="javascript:;" class="attentionButton" @click="gz(item.userId)">关注</a>
            </div>
        </div>
      </div>
  </div>
</template>

<script>
export default {
    data(){
        return{
            userinfo:[
                {
                    userHeader:"http://q1.qlogo.cn/g?b=qq&nk=746381864&s=640",
                    username:"北辞",
                    fans:1000,
                    message:"努力追梦",
                    userId:1,
                },
                {
                    userHeader:"http://q1.qlogo.cn/g?b=qq&nk=1705094711&s=640",
                    username:"北辞",
                    fans:1000,
                    message:"努力追梦",
                    userId:2,
                }
            ]
            
        }
    },
    methods:{
        gz(id){
             this.$http.put("/fans/addfans/"+id).then(va => {
                this.$alert(va.data.message)
            })
        },
    },
    created(){

    }
}
</script>

<style scoped lang="less">
    .box{
        padding: 10px;
        // margin-top: -28px;
        .togger{
            color: #9d7705;
            font-weight: bolder;
            font-size: 20px;
            text-align: right;
            display: block;
            float: right;
        }
        .userCord{
            width: 100%;
            height: auto;
            background: yellow;
            margin-top: 10px;
            border: 1px solid #e0e0e0;
            .cord{
                
                display: flex;
                justify-content: space-around;
                width: 100%;
                height: 70px;
                background: #fff;
                .userInfo{
                    width: 70%;
                    height: 100%;
                }
                .methodBox{
                    width: 30%;
                    padding: 20px;
                    height: 100%;
                }
                .userHeader{
                    padding: 10px;
                    width: 70px;
                    height: 100%;
                    // background: pink;
                    position: relative;
                    float: left;
                }
                .userMessage{
                    width: 150px;
                    height: 100%;
                    // background: red;
                    float: left;
                    padding-top: 15px;
                }
            }
        }
        .attentionButton{
            width: 60px;
            display: block;
            height: 30px;
            border-radius: 10px;
            background: #ffcd35;
            text-align: center;
            line-height: 30px;
            color: #fff;
            font-size: 12px;

        }
    }
    .userHeader>img:last-child{
        width: 20px;
        border-radius: 50%;
        bottom:6px;right:10px;
        position: absolute;
    }
     @media  screen and (max-width: 1300px) {
         .userCord .cord .userMessage{
            float:left !important;
        }
        .box{
            margin-top: 0px !important;
        }
     }
</style>